<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <my-header></my-header>
        <my-header></my-header>
        <my-header></my-header>
        <my-header></my-header>
        <my-header></my-header> -->
        <my-button :test="list"></my-button>
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>
    </div>
    <hr>
    <div id="app1">
            <!-- <my-button></my-button> -->
        <!-- <my-header></my-header> -->
    </div>
    <!-- <template id="tpl">
        <header>
            <ul>
                <li>1</li>  
                <li>2</li> 
                <li>1</li>   
            </ul>
        </header>
    </template> -->
    <!-- <script type="text/x-template" id="tpl">
        <header>
            <ul>
                <li>1</li>  
            </ul>
        </header>
    </script> -->
    <script src="./vue.js"></script>
    <script>
        // Vue.component('my-header',{
        //     template:'#tpl',
        //     data(){
        //         return {

        //         }
        //     }
        // })

        // Vue.component('myButton',{
        //     data(){
        //         return {
        //             num:1
        //         }
        //     },
        //     template:'<button @click="add">count{{num}}</button>',
        //     methods:{
        //         add(){
        //             this.num++
        //         }
        //     }
        // })
        let vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3]
            },
            components:{
                'my-button':{
                    props:['test'],
                    data(){
                        return {
                            num:1
                        }
                    },
                    template:'<div>{{test}}<button @click="add">count{{num}}</button><span>按钮</span></div>',
                    methods:{
                        add(){
                            this.num++
                        }
                    }
                 }
            }
        })

        let vm1 = new Vue({
            el:'#app1'
        })
    </script>
</body>
</html>